// src/composables/useBlobity.ts
import { ref, onBeforeUnmount } from 'vue';
import Blobity from 'blobity';
// Correctly import the default type export
import type BlobityOptions from 'blobity';
import { isClient } from '@vueuse/core'; // Check if running in browser
// Import the config
import appConfig from '@/config';

// Define default options, customizing focusableElements
const defaultOptions: Partial<BlobityOptions> = {
    licenseKey: 'opensource',
    invert: true,
    zIndex: 100, // Ensure it's above the flow elements
    magnetic: false,
    dotColor: '#10b981', // Example color, customize as needed
    radius: 8,
    focusableElementsOffsetX: 4,
    focusableElementsOffsetY: 4,
    mode: 'normal',
    // Target Vue Flow nodes specifically for the effect
    focusableElements: '.vue-flow__node',
    // Add other options as needed, e.g., color, size for focused state
    color: '#409EFF', // Example blob color
    size: 12,        // Example blob size
    font: "'Inter', sans-serif",
    fontSize: 16,
    fontWeight: 500,
    opacity: 0.7,
    fontColor: '#ffffff',
    // Example: Make blob larger when hovering nodes
    elementRadius: 16,
};

export function useBlobity() {
    // Initialize as null
    const blobityInstance = ref<Blobity | null>(null);

    // Create instance only if enabled in config and on client
    if (isClient && appConfig.enableBlobityEffect) {
        console.log('[useBlobity] Blobity effect enabled in config. Creating instance.');
        blobityInstance.value = new Blobity(defaultOptions as BlobityOptions);
    } else if (isClient) {
        console.log('[useBlobity] Blobity effect disabled in config.');
    }

    const destroyBlobity = () => {
        if (blobityInstance.value) {
            console.log('[useBlobity] Destroying blobity instance.');
            blobityInstance.value.destroy();
            blobityInstance.value = null; // Set ref back to null
        }
    };

    // Always register the unmount hook to clean up if instance exists
    onBeforeUnmount(() => {
        destroyBlobity();
    });

    // Return the ref (which might be null if effect is disabled)
    return {
        blobityInstance,
    };
}